<template>
  <div class="home-page-content">
    <h3>流程管理</h3>
    <div class="mt-20">
      <Form ref="formData" :model="formData">
        <Row :gutter="30">
          <Col span="6">
            <FormItem prop="input">
              <Input search placeholder="搜索关键词" v-model="formData.input" />
            </FormItem>
          </Col>
          <Col span="18" class="com-action-btn">
            <Button icon="md-search" type="primary">查询</Button>
            <BtnPlain type="primary" icon="md-refresh" @click="handleReset('formData')">
              <Icon type="md-refresh" />
              <span>重置</span>
            </BtnPlain>
          </Col>
        </Row>
      </Form>
    </div>
    <div class="com-action-table-btn">
      <BtnPlain type="error">批量删除</BtnPlain>
    </div>
    <Table :columns="columns" :data="listData">
      <template slot-scope="{ row }" slot="action">
        <BtnText type="primary" @click="onView(row)">配置流程</BtnText>
        <BtnText type="error">删除</BtnText>
      </template>
    </Table>
    <PageAtion
      v-if="total"
      :total="total"
      :size.sync="formData.size"
      :page.sync="formData.page"
      @pageSizeChange="pageSizeChange"
    />
  </div>
</template>

<script>
export default {
  name: 'processManage',
  data () {
    return {
      formData: {
        input: '',
        page: 1,
        size: 10,
      },
      columns: [
        {
          title: '生成时间',
          key: 'name',
        },
        {
          title: '流程名称',
          key: 'phone',
        },
        {
          title: '流程内容',
          key: 'role',
        },
        {
          title: '操作',
          slot: 'action',
          width: 150,
          align: 'center',
        },
      ],
      listData: new Array(10).fill(0).map(it => ({
        id: 1,
        name: '用户名称',
        phone: 18888888888,
        role: '企业管理员',
        test: 188
      })),
      total: 10,
    }
  },
  methods: {
    pageSizeChange () {
      console.log(row, 'pageSizeChange', this.formData);
    },
    handleReset (name) {
      this.$refs[name].resetFields();
    },
    onView (row) { },
  }
}
</script>

<style lang='less' scoped>
.search-input {
  width: 300px;
  margin-right: 20px;
}

.mt-20 {
  margin-top: 20px;
}
</style>
